<template>
  <div class="right3">
    <div class="InfiniteScroll">
      <div class="title">
        <div class="dq">地区</div>
        <div class="jzrksl">居住人口数量</div>
        <div class="zzxfd">专职消防队</div>
        <div class="wxxfz">微型消防站</div>
      </div>
      <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
        <div
          class="scroll_list"
          :style="{ transform: `translate(0px,-${scrollTop}px)` }"
        >
          <div ref="scrollItemBox">
            <div
              class="scroll_item"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <!-- {{ item.title }} -->
              <div class="i-dq">{{ item.date }}</div>
              <div class="i-jzrksl">{{ item.name }}个</div>
              <div class="i-zzxfd">{{ item.state }}个</div>
              <div class="i-wxxfz">{{ item.city }}</div>
            </div>
          </div>
          <div v-html="copyHtml"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, nextTick } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  tableData:{
    type: Array,
    default: () => [],
  },
})
const tableColumns = ref([
  {
    fixed: false,
    prop: 'date',
    label: '地区',
    width: '100',
    align: 'center',
  },
  {
    prop: 'name',
    label: '居住人口数量',
    width: '120',
    align: 'center',
  },
  {
    prop: 'state',
    label: '专职消防队',
    width: '120',
    align: 'center',
  },
  {
    prop: 'city',
    label: '微型消防站',
    width: '120',
    align: 'center',
  },
])
const scrollTop = ref(0);
const speed = ref(20);
const scrollItemBox = ref(null)
const copyHtml = ref(null);
let timer = null;
    const initScroll = () => {
      nextTick(() => {
        copyHtml.value = scrollItemBox.value.innerHTML
        startScroll()
      })
    }
    // 鼠标移入停止滚动
    const mEnter = () => {
      clearInterval(timer)
    }
    // 鼠标移出继续滚动
    const mLeave = () => {
      startScroll()
    }
    // 开始滚动
    const startScroll = () => {
      timer = setInterval(scroll, speed.value)
    }
    // 滚动处理方法
    const scroll = () => {
      scrollTop.value++
      // 获取需要滚动的盒子的高度
      let scrollItemBoxVal = scrollItemBox.value.offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (scrollTop.value >= scrollItemBoxVal) {
        scrollTop.value = 0
      }
    }
    onMounted(() => {
       initScroll();
    })
</script>
<style scoped lang="scss">
.right3 {
  width: 100%;
  height: 100%;
  flex: 1;
  //   border: 1px solid red;
  // 表格部分样式
  // 最外层透明
  .InfiniteScroll {
    box-sizing: border-box;
    /* padding: 50px; */
    // border: 1px solid red;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    // border: 1px solid red;
    height: 15%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    font-size: 1.5rem;
    .dq {
      width: 20%;
      color: #cec924;
      // border: 1px solid yellow;
    }
    .jzrksl {
      width: 20%;
      // border: 1px solid yellow;
      color: #cec924;
    }
    .zzxfd {
      width: 20%;
      // border: 1px solid yellow;
      color: #cec924;
    }
    .wxxfz {
      width: 20%;
      color: #cec924;
    }
  }

  .scroll_parent_box {
    // border: 1px solid red;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // border: 1px solid #ebeef5;
    overflow: hidden;
    box-sizing: border-box;
    // padding: 0 10px;
  }

  .scroll_list {
    transition: all 0ms ease-in 0s;
  }

  .scroll_item {
    width: 100%;
    height: 30%;
    border-bottom: 2px dashed #0e4772;
    display: flex;
    justify-content: space-between;
    background-color: #0d2a45;
    text-align: center;
    line-height: 250%;
    cursor: pointer;
    &:hover {
      background-color: #063570;
    }
    .i-dq {
      width: 20%;
      // border: 1px solid red;
      // background-color: #0d2a45;
    }
    .i-jzrksl {
      width: 20%;
      // border: 1px solid red;
      color: #01ffdf;
    }
    .i-zzxfd {
      width: 20%;
      // border: 1px solid red;
      color: #cec924;
    }
    .i-wxxfz {
      width: 20%;
    }
  }
}
</style>
